<template>
    <view class="page">
        <view class="tip-wrap">
            <view class="tip-icon"></view>
            <view class="text">新手机号验证后，即可绑定成功！</view>
        </view>
        <view class="input-wrap">
            <input type="text" placeholder="手机号" class="cellphone" v-model="cellphone" />
        </view>
        <view class="input-wrap">
            <view class="msg-code">
                <input type="text" placeholder="请输入短信验证码" v-model="msgCode" />
            </view>
            <view :class="{'msg-code-btn':true, active:isSendCode}" @click="getMsgCode()">{{msgText}}</view>
        </view>
        <button type="button" class="submit-btn" @click="submit()">确认绑定</button>
    </view>
</template>

<script>
    import {mapActions, mapState} from "vuex";
    export default {
        name: "bind-cellphone",
        data() {
            return {
                cellphone: "",//手机号
                msgCode: "",//短信验证码
                msgText: "获取验证码",
                isSendCode: true,
                timer: null
            };
        },
        onLoad(opts) {
            this.isSubmit = true;
            this.timer = null;
            this.branch_shop_id = opts.branch_shop_id? opts.branch_shop_id : "";
            this.table_code = opts.table_code? opts.table_code : "";
            this.$utils.safeUser(this, this.branch_shop_id, this.table_code);
        },
        methods: {
            ...mapActions({
                existCellphone: "user/existCellphone",
                sendCode: "vcode/sendCode",
                bindCellhone: "user/bindCellhone"
            }),
            ...mapState({
                uid: state => state.user.uid,
                token: state => state.user.token,
                platform: state => state.system.platform
            }),
            async getMsgCode() {
                if (!this.isSendCode) return;
                if (this.cellphone.trim() === "") {
                    uni.showToast({
                        title: '请输入手机号',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }
                if (!this.cellphone.match(/^1[0-9][0-9]\d{8}$/)) {
                    uni.showToast({
                        title: '您输入的手机号格式不正确',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }
                const existCellphone = await this.existCellphone({cellphone: this.cellphone});
                if (existCellphone.data.exist === '1') { // 手机号已存在
                    uni.showToast({
                        title: '手机号存在，请更换',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }
                this.isSendCode = false;
                let time = 60;
                this.timer = setInterval(() => {
                    if (time > 0) {
                        this.msgText = `${time}s后重试`;
                        time--;
                    } else {
                        clearInterval(this.timer);
                        this.isSendCode = true;
                        this.msgText = "获取验证码";
                    }
                }, 1000);
                try {
                    const smsCode = await this.sendCode({cellphone: this.cellphone});
					console.log('验证码发送成功，返回的数据:', smsCode);
                    if (smsCode.code!== 200) {
                        uni.showToast({
                            title: smsCode.data,
                            icon: 'none',
                            duration: 2000
                        });
                        clearInterval(this.timer);
                        this.isSendCode = true;
                        this.msgText = "获取验证码";
                    }
                } catch (error) {
                    uni.showToast({
                        title: '获取验证码失败',
                        icon: 'none',
                        duration: 2000
                    });
                    clearInterval(this.timer);
                    this.isSendCode = true;
                    this.msgText = "获取验证码";
                }
            },
            async submit() {
                if (this.cellphone.trim() === "") {
                    uni.showToast({
                        title: '请输入手机号',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }
                if (!this.cellphone.match(/^1[0-9][0-9]\d{8}$/)) {
                    uni.showToast({
                        title: '您输入的手机号格式不正确',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }
                if (this.msgCode.trim() === "") {
                    uni.showToast({
                        title: '请输入短信验证码',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }
                try {
                    const bindRes = await this.bindCellhone({
                        cellphone: this.cellphone,
                        sms_code: this.msgCode
                    });
                    if (bindRes.status === 1 && bindRes.code === 200) {
                        uni.showToast({
                            title: '绑定成功',
                            icon: 'none',
                            duration: 2000
                        });
                        setTimeout(() => {
                            uni.navigateBack({delta: 1});
                        }, 2000);
                    } else {
                        uni.showToast({
                            title: bindRes.data,
                            icon: 'none',
                            duration: 2000
                        });
                    }
                } catch (error) {
                    uni.showToast({
                        title: '绑定失败',
                        icon: 'none',
                        duration: 2000
                    });
                }
            }
        }
    };
</script>

<style scoped>
    .page{width:100%;min-height:100vh;overflow:hidden;background-color:#FFFFFF;}
    .tip-wrap{width:100%;height:100rpx;background-color:#f3f5c4;display:flex;box-sizing: border-box;align-items: center;padding-left:40rpx;margin-bottom:40rpx;}
    .tip-wrap .tip-icon{width:40rpx;height:40rpx;background-image:url("~@/static/images/user/tip.png");background-size:100%;background-position: center;background-repeat: no-repeat;margin-right:20rpx;}
    .tip-wrap .text{font-size:28rpx;color:#ac7700;}

    .input-wrap{width:90%;height:80rpx;background-color:#FFFFFF;border:1px solid #EFEFEF;margin:0 auto;display:flex;align-items: center;box-sizing: border-box;padding-left:20rpx;border-radius: 5px;margin-bottom:20rpx;}
    .input-wrap .cellphone{width:90%;height:80%;font-size:28rpx;}

    .input-wrap .msg-code{width:70%;height:100%;border-right: 1px solid #EFEFEF}
    .input-wrap .msg-code input{width:100%;height:100%;font-size:28rpx;}

    .input-wrap .msg-code-btn{width:29%;height:100%;text-align:center;line-height:80rpx;font-size:28rpx;color:#717376;}
    .input-wrap .msg-code-btn.active{color:#E30019}

    .input-wrap .msg-code-btn image{width:80%;height:80%;margin-top:9rpx;}

    .submit-btn{width:200rpx;height:60rpx;margin:0 auto;background-color:#E30019;color:#FFFFFF;font-size:28rpx;margin-top:40rpx;line-height:60rpx;border-radius: 4px;}
</style>